<template>
	<NavBar title="任务编号321542" left-icon="left" :border="false" color="#333" />
	<view class="task-content">
		<uni-card spacing="20rpx">
			<template #title>
				<view class="card-header df-between">
					<view class="left df-c">
						<image src="@/static/home/circle.png" mode="widthFix" class="icon"></image>
						<text>{{data.name}}</text>
					</view>
					<view class="right">
						<text class="unit">￥</text>
						<text class="num">{{data.value}}</text>
					</view>
				</view>
				<view class="content-box df-column">
					<text>{{data.tips}}</text>
					<view class="item-box df-l">
						<view class="item" v-for="(v, i) in data.tags" :key="i">
							<text>{{v}}</text>
						</view>
					</view>
				</view>
			</template>
			<view class="footer-box df-between">
				<view class="item df-c">
					<image src="@/static/home/circle.png" mode="widthFix" class="icon"></image>
					<text>{{1000}}人已赚</text>
				</view>
				<view class="item df-c">
					<image src="@/static/home/circle.png" mode="widthFix" class="icon"></image>
					<text>剩余{{2000}}份</text>
				</view>
				<view class="item df-c">
					<image src="@/static/home/circle.png" mode="widthFix" class="icon"></image>
					<text>通过率{{60}}%</text>
				</view>
				<view class="item df-c">
					<image src="@/static/home/circle.png" mode="widthFix" class="icon"></image>
					<text>不限设备</text>
				</view>
			</view>
		</uni-card>
		<view class="infos-box df-column">
			<view class="top">
				<text class="title">报名任务，请遵守</text>
				<text class="link">《接单规则》</text>
			</view>
			<view class="footer df-column">
				<text>1、诱导私加，私下交易，发布同类平台任务，举报有奖</text>
				<text>2、涉及支付未说明，统一更改密码，免密支付的任务，千万别做</text>
				<text>3、请先报名再做任务，否则无法提交，也无赏金</text>
				<text>4、请勿乱提交，有封号风险</text>
				<text>5、需要编辑数字发送短信到指定号码，请立即停止任务并举报</text>
			</view>
		</view>
		<text class="title">任务步骤</text>
		<view class="infos-box df-column">
			<view class="tips-box df-c">
				<text>任务说明:首次关注领券秒通过，4天内请不要取消关注</text>
			</view>
			<view class="footer-body" v-html="stepData"></view>
		</view>
	</view>

</template>

<script setup>
	import { ref } from 'vue'
	import NavBar from '@/components/navbar/index.vue'
	import Section from './section.vue'

	const data = ref({
		name: '夸克网盘',
		value: "8.00",
		tips: '关注助力 | 美团好食',
		tags: ['小说资源', '抖音快手', '各电商平台', '自媒体', '社群', '自有APP/网站'],
		val: 2
	})
		const stepData = ref('步骤信息')
</script>

<style lang="scss" scoped>
	.task-content {
		padding: 30rpx;
		box-sizing: border-box;

		.card-header {
			&>.left {
				color: #333333;
				font-size: 30rpx;
				font-weight: Bold;

				&>.icon {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}

			&>.right {
				color: #F44242;
				font-size: 24rpx;

				&>.num {
					font-size: 40rpx;
				}
			}
		}

		:deep(.uni-card--shadow) {
			margin: 0rpx !important;
		}

		.content-box {
			display: flex;
			padding-bottom: 20rpx;
			color: #999999;
			font-size: 24rpx;
			margin: 8rpx 20rpx 12rpx 40rpx;
			position: relative;

			&>.item-box {
				gap: 20rpx;
				flex-wrap: wrap;
				margin-top: 20rpx;

				&>.item {
					background-color: #F5F7FB;
					border-radius: 8rpx;
					padding: 8rpx 12rpx;
					box-sizing: border-box;
					font-size: 24rpx;
				}
			}
		}

		:deep(.uni-card__content) {
			padding: 0 !important;
		}

		.footer-box {
			padding-top: 20rpx;
			border-top: 2rpx solid #ddd;

			&>.item {
				color: #999999;
				font-size: 18rpx;
				gap: 8rpx;

				&>.icon {
					width: 24rpx;
					border: 2rpx solid;
					border-radius: 50%;
				}
			}
		}

		// 信息描述
		&>.infos-box {
			padding: 20rpx 20rpx 36rpx 20rpx;
			margin-top: 30rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 6rpx 0rpx rgba(175, 175, 175, 0.1);
			border-radius: 16rpx;
			font-size: 24rpx;

			&>.top {
				margin-bottom: 20rpx;

				&>.title {
					color: #333;
				}

				&>.link {
					color: #427DFF;
				}
			}

			&>.footer {
				gap: 10rpx;
				color: #666666;
				font-size: 20rpx;
			}
		}

		&>.title {
			color: #666;
			font-size: 30rpx;
			display: block;
			margin: 20rpx 0;
		}

		// 任务步骤r
		.tips-box {
			height: 60rpx;
			background: #E0EAFF;
			border-radius: 8rpx;
			color: #427DFF;
			font-size: 24rpx;
			margin-bottom: 30rpx;
		}
	}
</style>